import React, {Component} from "react";
import {
    Grid,
    Button,
    Icon,
    Table,
    Modal,
    Form,
    Alert,
    FormGroup,
    Input,
    ControlLabel,
    InputNumber,
    Uploader,
    Toggle,
} from "rsuite";
import Tree, {TreeNode} from "rc-tree";
import CustomField from "../../components/form/customField";
import {Menu, Item, contextMenu} from "react-contexify";
import http from "../../components/http/http";
import rest from "../../assets/config/rest";

class GraphicConfig extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectCategoryId: null,
            componentTypeEnum: {
                1: {name: "Boolean", value: 1, code: "BOOLEAN"},
                2: {name: "Numberic", value: 2, code: "NUMBERIC"},
                3: {name: "Image", value: 3, code: "IMAGE"},
            },
            category: {
                showModal: false,
                treeData: [],
                form: {
                    parentId: "-1",
                    name: "",
                    id: null,
                },
            },
            booleanGraphic: {
                showModal: false,
                form: {
                    id: null,
                    editable: 1,
                    height: 0,
                    name: "",
                    typeId: 1, //1-bool
                    width: 0,
                    graphicComponentFiles: [],
                },
                tableData: [
                    {
                        imageValue: "True",
                        fileName: "",
                        isDefault: false,
                    },
                    {
                        imageValue: "False",
                        fileName: "",
                        isDefault: true,
                    },
                ],
            },
            numericGraphic: {
                showModal: false,
                form: {
                    id: null,
                    editable: 1,
                    height: 0,
                    name: "",
                    typeId: 2,
                    width: 0,
                    graphicComponentFiles: [],
                },
                tableData: [
                    {
                        minValue: "",
                        maxValue: "",
                        fileName: "",
                        isDefault: true,
                    },
                ],
            },
            pureGraphic: {
                showModal: false,
                form: {
                    id: null,
                    editable: 0,
                    height: 0,
                    name: "",
                    typeId: 3,
                    width: 0,
                    graphicComponentFiles: [],
                },
                tableData: [
                    {
                        fileName: "",
                    },
                ],
            },
            viewGraphic: {
                showModal: false,
                data: [],
            },
            rightData: [],
            rightMenuStyle: {display: "block", zIndex: 10001},
            isDeleteDisabled: true,
            showNumericGraphicComponent: false,
            selectedTreeNode: {}, //由于form在页面渲染时id就已经有了初始值，所以需要在提交时，重新设置一下
            currentPerms: [],
        };
        //folder
        this.renderTreeNode = this.renderTreeNode.bind(this);
        this.treeClick = this.treeClick.bind(this);
        this.treeRightClick = this.treeRightClick.bind(this);
        this.addCategorySubmit = this.addCategorySubmit.bind(this);
        this.deleteCategory = this.deleteCategory.bind(this);
        //boolean image
        this.addBooleanGraphic = this.addBooleanGraphic.bind(this);
        this.booleanDefaultChange = this.booleanDefaultChange.bind(this);
        this.booleanGraphicSuccess = this.booleanGraphicSuccess.bind(this);
        this.booleanGraphicSubmit = this.booleanGraphicSubmit.bind(this);
        // numeric image
        this.addNumericGraphic = this.addNumericGraphic.bind(this);
        this.addNumericTableData = this.addNumericTableData.bind(this);
        this.numericGraphicSubmit = this.numericGraphicSubmit.bind(this);
        this.removeNumericTableData = this.removeNumericTableData.bind(this);
        this.editNumericImageData = this.editNumericImageData.bind(this);
        // pure image
        this.addPureGraphic = this.addPureGraphic.bind(this);
        this.pureGraphicSuccess = this.pureGraphicSuccess.bind(this);
        this.pureGraphicSubmit = this.pureGraphicSubmit.bind(this);
        // all
        this.viewGraphic = this.viewGraphic.bind(this);
        this.editGraphic = this.editGraphic.bind(this);
        this.loadGraphicsByCategoryId = this.loadGraphicsByCategoryId.bind(this);
        this.deleteGraphic = this.deleteGraphic.bind(this);
    }

    UNSAFE_componentWillMount() {
        const {category} = this.state;
        let menus = window.localStorage.getItem(rest.menus);
        if (!!menus) {
            this.setState({
                currentPerms: JSON.parse(menus)
                    .filter((x) => x.name === "System")[0]
                    .children.filter((y) => y.name === "GraphicConfig")[0].perms,
            });
        }
        if (category.treeData.length === 0) {
            this.loadTreeData();
        }
    }

    componentWillUnmount() {
        this.setState = (state, callback) => {
            return;
        };
    }

    loadTreeData() {
        const {category} = this.state;
        http.get(rest.graphic.componentTree).then((response) => {
            if (response.status === 200 && response.data.code === 200) {
                let result = !!response.data.data ? response.data.data : [];
                let resData = result.map((item) => {
                    return {
                        key: item.key,
                        title: item.title,
                        parentId: item.parentId,
                        type: item.type,
                    };
                });

                let tmpArr = [
                    {key: "0", title: "Root", parentId: "-1", type: 1},
                    ...resData,
                ];
                this.setState({category: {...category, treeData: tmpArr}});
            }
        });
    }

    renderTreeNode(parentId) {
        // 先找到子级节点
        const {category} = this.state;
        let tmp = category.treeData.filter((item) => {
            return item.parentId === parentId;
        });
        if (tmp.length > 0) {
            // 遍历铺页面，如果数组长度不为0则证明子级不为空
            return tmp.map((item) => {
                return (
                    <TreeNode
                        title={item.title}
                        key={item.key}
                        dataRef={item}
                        data-key={item.key}
                        data-title={item.title}
                        data-type={item.type}
                    >
                        {this.renderTreeNode(item.key)}
                    </TreeNode>
                );
            });
        }
    }

    treeClick(event, node) {
        this.setState({selectCategoryId: node.key});
        this.loadGraphicsByCategoryId(node.key);
    }

    loadGraphicsByCategoryId(id) {
        const {componentTypeEnum} = this.state;
        http
            .get(rest.graphic.categoryComponent, {
                params: {
                    id: id,
                },
            })
            .then((response) => {
                if (response.status === 200 && response.data.code === 200) {
                    let data = !!response.data.data ? response.data.data : [];
                    let result = data.map((x) => {
                        x.type = componentTypeEnum[x.typeId].name;
                        return x;
                    });
                    this.setState({rightData: result});
                }
            });
    }

    treeRightClick({event, node}) {
        const {category} = this.state;
        let isDeleteDisabled = false;
        if (Number(node.key) === 0) {
            isDeleteDisabled = true;
        }
        let categoryForm = category.form;
        categoryForm.parentId = node.dataRef.parentId;
        categoryForm.id = node.dataRef.key;
        categoryForm.name = node.dataRef.title;
        let e = event.nativeEvent;
        this.setState(
            {
                category: {
                    ...category,
                    form: categoryForm,
                },
                isDeleteDisabled: isDeleteDisabled,
                selectedTreeNode: node,
            },
            () => {
                this.menuShow(e);
            }
        );
    }

    menuShow(e) {
        e.preventDefault();
        contextMenu.show({
            id: "menu_id",
            event: e,
        });
    }

    addCategorySubmit() {
        const {category} = this.state;
        let form = category.form;
        let callback = (response) => {
            if (response.status === 200 && response.data.code === 200) {
                this.setState({
                    category: {
                        ...category,
                        form: {
                            parentId: "-1",
                            name: "",
                            id: null,
                        },
                        showModal: false,
                    },
                });
                Alert.success("Success !");
                this.loadTreeData();
            } else {
                Alert.error("Failed !");
            }
        };
        if (!!form.id) {
            http.put(rest.graphic.category, form).then(callback);
        } else {
            http.post(rest.graphic.category, form).then(callback);
        }
    }

    deleteCategory() {
        const {selectedTreeNode} = this.state;
        let id = selectedTreeNode.key;
        http.delete(rest.graphic.category, {params: {id}}).then((response) => {
            if (response.status === 200 && response.data.code === 200) {
                Alert.success("Delete Success!");
                this.loadTreeData();
            } else {
                Alert.error("Delete failed");
            }
        });
    }

    addBooleanGraphic() {
        const {selectCategoryId} = this.state;
        if (!selectCategoryId) {
            Alert.error("please choose a category");
            return;
        }
        //1代表boolean image
        this.setState({
            booleanGraphic: {
                showModal: true,
                form: {
                    id: null,
                    editable: 1,
                    height: 0,
                    name: "",
                    typeId: 1,
                    width: 0,
                    graphicComponentFiles: [],
                },
                tableData: [
                    {
                        imageValue: "True",
                        fileName: "",
                        isDefault: false,
                    },
                    {
                        imageValue: "False",
                        fileName: "",
                        isDefault: true,
                    },
                ],
            },
        });
    }

    booleanDefaultChange(checked, index) {
        const {booleanGraphic} = this.state;
        let tableData = booleanGraphic.tableData.map((x, y) => {
            x.isDefault = Number(y) === Number(index) ? checked : false;
            return x;
        });
        let graphicComponentFiles = booleanGraphic.form.graphicComponentFiles.map(
            (x) => {
                x.isDefault = Number(x.index) === Number(index) ? checked : false;
                return x;
            }
        );
        this.setState({
            booleanGraphic: {
                ...booleanGraphic,
                form: {
                    ...booleanGraphic.form,
                    graphicComponentFiles: graphicComponentFiles,
                },
                tableData: tableData,
            },
        });
    }

    booleanGraphicSuccess(response, fileInfo, cell) {
        const {booleanGraphic} = this.state;
        let obj = {
            index: cell.rowIndex,
            graphicFileId: response.data.id,
            logic: cell.rowData.imageValue === "True" ? 1 : 0,
            isDefault: cell.rowData.isDefault,
        };
        let files = booleanGraphic.form.graphicComponentFiles;
        files.push(obj);
        this.setState({
            booleanGraphic: {
                ...booleanGraphic,
                form: {
                    ...booleanGraphic.form,
                    graphicComponentFiles: files,
                },
                tableData: booleanGraphic.tableData.map((x, y) => {
                    if (Number(y) === Number(cell.rowIndex)) {
                        x.fileName = fileInfo.name;
                    }
                    return x;
                }),
            },
        });
    }

    booleanGraphicSubmit() {
        const {booleanGraphic, selectCategoryId} = this.state;
        const submitForm = {
            graphicComponent: {
                id: booleanGraphic.form.id,
                categoryId: selectCategoryId,
                editable: 1,
                height: booleanGraphic.form.height,
                name: booleanGraphic.form.name,
                typeId: booleanGraphic.form.typeId, //1-bool
                width: booleanGraphic.form.width,
            },
            graphicComponentFiles: booleanGraphic.form.graphicComponentFiles,
        };
        let callback = (response) => {
            if (response.status === 200 && response.data.code === 200) {
                this.setState({
                    booleanGraphic: {
                        showModal: false,
                        form: {
                            id: null,
                            editable: 1,
                            height: 0,
                            name: "",
                            typeId: 1,
                            width: 0,
                            graphicComponentFiles: [],
                        },
                        tableData: [
                            {
                                imageValue: "True",
                                fileName: "",
                                isDefault: false,
                            },
                            {
                                imageValue: "False",
                                fileName: "",
                                isDefault: true,
                            },
                        ],
                    },
                });
                Alert.success("Success !");
                this.loadGraphicsByCategoryId(selectCategoryId);
            } else {
                Alert.error("Failed !");
            }
        };
        if (!!submitForm.graphicComponent.id) {
            http.put(rest.graphic.component, submitForm).then(callback);
        } else {
            http.post(rest.graphic.component, submitForm).then(callback);
        }
    }

    addNumericGraphic() {
        const {selectCategoryId} = this.state;
        if (!selectCategoryId) {
            Alert.error("please choose a category");
            return;
        }
        this.setState({
            numericGraphic: {
                showModal: true,
                form: {
                    id: null,
                    editable: 1,
                    height: 0,
                    name: "",
                    typeId: 2,
                    width: 0,
                    graphicComponentFiles: [],
                },
                tableData: [
                    {
                        minValue: "",
                        maxValue: "",
                        fileName: "",
                        isDefault: true,
                    },
                ],
            },
        });
    }

    addNumericTableData() {
        const {numericGraphic} = this.state;
        let tableData = numericGraphic.tableData;
        tableData.push({
            minValue: "",
            maxValue: "",
            fileName: "",
            isDefault: false,
        });
        this.setState({
            numericGraphic: {
                ...numericGraphic,
                tableData: tableData,
            },
        });
    }

    removeNumericTableData() {
        const {numericGraphic} = this.state;
        let tableData = numericGraphic.tableData;
        let files = numericGraphic.form.graphicComponentFiles;
        if (tableData.length === 1) {
            Alert.error("already last row");
            return;
        }
        tableData.pop();
        files.pop();
        this.setState({
            numericGraphic: {
                ...numericGraphic,
                form: {
                    ...numericGraphic.form,
                    graphicComponentFiles: files,
                },
                tableData: tableData,
            },
        });
    }

    editNumericImageData(newVal, cellData) {
        const {numericGraphic} = this.state;
        numericGraphic.tableData[cellData.rowIndex][cellData.field] = newVal;
        this.setState({numericGraphic});
    }

    numericDefaultChange(checked, index) {
        const {numericGraphic} = this.state;
        let tableData = numericGraphic.tableData.map((x, y) => {
            x.isDefault = Number(y) === Number(index) ? checked : false;
            return x;
        });
        let graphicComponentFiles = numericGraphic.form.graphicComponentFiles.map(
            (x) => {
                x.isDefault = Number(x.index) === Number(index) ? checked : false;
                return x;
            }
        );
        this.setState({
            numericGraphic: {
                ...numericGraphic,
                form: {
                    ...numericGraphic.form,
                    graphicComponentFiles: graphicComponentFiles,
                },
                tableData: tableData,
            },
        });
    }

    numericGraphicBefore(cell) {
        if (!!cell.rowData.minValue || !!cell.rowData.maxValue) {
            return true;
        }
        Alert.error("Please check current row's minValue and maxValue");
        return false;
    }

    numericGraphicSuccess(response, fileInfo, cell) {
        const {numericGraphic} = this.state;
        let obj = {
            index: cell.rowIndex,
            graphicFileId: response.data.id,
            logic: `${cell.rowData.minValue}_${cell.rowData.maxValue}`,
            isDefault: cell.rowData.isDefault,
        };
        let files = numericGraphic.form.graphicComponentFiles;
        files.push(obj);
        this.setState({
            numericGraphic: {
                ...numericGraphic,
                form: {
                    ...numericGraphic.form,
                    graphicComponentFiles: files,
                },
                tableData: numericGraphic.tableData.map((x, y) => {
                    if (Number(y) === Number(cell.rowIndex)) {
                        x.fileName = fileInfo.name;
                    }
                    return x;
                }),
            },
        });
    }

    numericGraphicSubmit() {
        const {numericGraphic, selectCategoryId} = this.state;
        const submitForm = {
            graphicComponent: {
                id: numericGraphic.form.id,
                categoryId: selectCategoryId,
                editable: 1,
                height: numericGraphic.form.height,
                name: numericGraphic.form.name,
                typeId: numericGraphic.form.typeId,
                width: numericGraphic.form.width,
            },
            graphicComponentFiles: numericGraphic.form.graphicComponentFiles,
        };
        let callback = (response) => {
            if (response.status === 200 && response.data.code === 200) {
                this.setState({
                    numericGraphic: {
                        showModal: false,
                        form: {
                            id: null,
                            editable: 1,
                            height: 0,
                            name: "",
                            typeId: 2,
                            width: 0,
                            graphicComponentFiles: [],
                        },
                        tableData: [
                            {
                                minValue: "",
                                maxValue: "",
                                fileName: "",
                                isDefault: true,
                            },
                        ],
                    },
                });
                Alert.success("Add Comp Success !");
                this.loadGraphicsByCategoryId(selectCategoryId);
            } else {
                Alert.error("Add Failed !");
            }
        };
        if (!!submitForm.graphicComponent.id) {
            http.put(rest.graphic.component, submitForm).then(callback);
        } else {
            http.post(rest.graphic.component, submitForm).then(callback);
        }
    }

    addPureGraphic() {
        const {selectCategoryId} = this.state;
        if (!selectCategoryId) {
            Alert.error("please choose a category");
            return;
        }
        this.setState({
            pureGraphic: {
                showModal: true,
                form: {
                    id: null,
                    editable: 0,
                    height: 0,
                    name: "",
                    typeId: 3,
                    width: 0,
                    graphicComponentFiles: [],
                },
                tableData: [
                    {
                        fileName: "",
                    },
                ],
            },
        });
    }

    pureGraphicSuccess(response, fileInfo, cell) {
        const {pureGraphic} = this.state;
        let obj = {
            index: cell.rowIndex,
            graphicFileId: response.data.id,
            logic: "NONE",
            isDefault: true,
        };
        let files = pureGraphic.form.graphicComponentFiles;
        files.push(obj);
        this.setState({
            pureGraphic: {
                ...pureGraphic,
                form: {
                    ...pureGraphic.form,
                    graphicComponentFiles: files,
                },
                tableData: pureGraphic.tableData.map((x, y) => {
                    if (Number(y) === Number(cell.rowIndex)) {
                        x.fileName = fileInfo.name;
                    }
                    return x;
                }),
            },
        });
    }

    pureGraphicSubmit() {
        const {pureGraphic, selectCategoryId} = this.state;
        const submitForm = {
            graphicComponent: {
                id: pureGraphic.form.id,
                categoryId: selectCategoryId,
                editable: 0,
                height: pureGraphic.form.height,
                name: pureGraphic.form.name,
                typeId: pureGraphic.form.typeId,
                width: pureGraphic.form.width,
            },
            graphicComponentFiles: pureGraphic.form.graphicComponentFiles,
        };
        let callback = (response) => {
            if (response.status === 200 && response.data.code === 200) {
                this.setState({
                    pureGraphic: {
                        showModal: false,
                        form: {
                            id: null,
                            editable: 0,
                            height: 0,
                            name: "",
                            typeId: 3,
                            width: 0,
                            graphicComponentFiles: [],
                        },
                        tableData: [
                            {
                                fileName: "",
                            },
                        ],
                    },
                });
                Alert.success("Add Comp Success !");
                this.loadGraphicsByCategoryId(selectCategoryId);
            } else {
                Alert.error("Add Failed !");
            }
        };
        if (!!submitForm.graphicComponent.id) {
            http.put(rest.graphic.component, submitForm).then(callback);
        } else {
            http.post(rest.graphic.component, submitForm).then(callback);
        }
    }

    viewGraphic() {
        const {selectedGraphic} = this.state;
        let id = selectedGraphic[0].id;
        http
            .get(rest.graphic.thumbnail, {
                params: {
                    componentId: id,
                },
            })
            .then((response) => {
                if (response.status === 200 && response.data.code === 200) {
                    this.setState({
                        viewGraphic: {
                            showModal: true,
                            data: response.data.data.map((x) => {
                                x.logic = this.processLogic(x.logic);
                                x.path = (
                                    <img
                                        alt="img"
                                        style={{padding: "0.5rem 0"}}
                                        src={rest.graphic.fileUrl + x.path}
                                    ></img>
                                );
                                return x;
                            }),
                        },
                    });
                }
            });
    }

    processLogic(logic) {
        let str = "";
        if (logic.indexOf("_") !== -1) {
            let arr = logic.split("_");
            str = `Min Value: ${arr[0]}, Max Value: ${arr[1]}`;
        } else if (logic === "NONE") {
            str = "Default Image:";
        } else {
            if (Number(logic) === 0) {
                str = "False Value:";
            } else {
                str = "True Value:";
            }
        }
        return str;
    }

    editGraphic() {
        const {selectedGraphic} = this.state;
        let id = selectedGraphic[0].id;
        http
            .get(rest.graphic.component, {params: {id: id}})
            .then((response) => {
                if (response.status === 200 && response.data.code === 200) {
                    let result = response.data.data;
                    let commonObj = {
                        id: result.graphicComponent.id,
                        editable: result.graphicComponent.editable,
                        height: result.graphicComponent.height,
                        name: result.graphicComponent.name,
                        typeId: result.graphicComponent.typeId,
                        width: result.graphicComponent.width,
                        graphicComponentFiles: result.graphicComponentFiles.map((x, y) => {
                            return {
                                index: y,
                                graphicFileId: x.graphicFileId,
                                logic: x.logic,
                                isDefault: x.isDefault,
                            };
                        }),
                    };
                    if (Number(result.graphicComponent.typeId) === 1) {
                        this.setState({
                            booleanGraphic: {
                                showModal: true,
                                form: commonObj,
                                tableData: result.graphicComponentFiles.map((x) => {
                                    return {
                                        imageValue: Number(x.logic) === 1 ? "True" : "False",
                                        fileName: x.fileName,
                                        isDefault: x.isDefault,
                                    };
                                }),
                            },
                        });
                    } else if (Number(result.graphicComponent.typeId) === 2) {
                        this.setState({
                            numericGraphic: {
                                showModal: true,
                                form: commonObj,
                                tableData: result.graphicComponentFiles.map((x) => {
                                    let arr = x.logic.split("_");
                                    return {
                                        minValue: arr[0],
                                        maxValue: arr[1],
                                        fileName: x.fileName,
                                        isDefault: x.isDefault,
                                    };
                                }),
                            },
                        });
                    } else if (Number(result.graphicComponent.typeId) === 3) {
                        this.setState({
                            pureGraphic: {
                                showModal: true,
                                form: commonObj,
                                tableData: result.graphicComponentFiles.map((x) => {
                                    return {
                                        fileName: x.fileName,
                                    };
                                }),
                            },
                        });
                    }
                }
            });
    }

    deleteGraphic() {
        const {selectedGraphic, selectCategoryId} = this.state;
        let id = selectedGraphic[0].id;
        http.delete(rest.graphic.component, {params: {id}}).then((response) => {
            if (response.status === 200 && response.data.code === 200) {
                Alert.success("Delete Success!");
                this.loadGraphicsByCategoryId(selectCategoryId);
            } else {
                Alert.error("Delete failed");
            }
        });
    }

    render() {
        const {
            rightMenuStyle,
            category,
            rightData,
            booleanGraphic,
            numericGraphic,
            pureGraphic,
            viewGraphic,
            isDeleteDisabled,
            selectedGraphic,
            currentPerms,
        } = this.state;
        return (
            <Grid className="fixOuterHeight">
                <Grid.Row>
                    <Grid.Column width={2}>
                        <Card style={{height: "100%"}}>
                            <Card.Header title="Categories"></Card.Header>
                            <Card.Content>
                                <Tree
                                    showIcon={false}
                                    onRightClick={this.treeRightClick}
                                    onClick={this.treeClick}
                                    switcherIcon={(e) => {
                                        if (e.isLeaf) {
                                            return null;
                                        }
                                        return e.expanded ? (
                                            <Icon name="caret-down"/>
                                        ) : (
                                            <Icon name="caret-right"/>
                                        );
                                    }}
                                >
                                    {this.renderTreeNode("-1")}
                                </Tree>
                                <Menu theme="dark" id="menu_id" style={rightMenuStyle}>
                                    <Item
                                        disabled={
                                            currentPerms.indexOf("system:graphicConfig:add") === -1
                                        }
                                        onClick={() => {
                                            this.setState({
                                                category: {
                                                    ...category,
                                                    showModal: true,
                                                    form: {
                                                        ...category.form,
                                                        name: "",
                                                        parentId: category.form.id,
                                                        id: null,
                                                    },
                                                },
                                            });
                                        }}
                                    >
                                        Add Folder
                                    </Item>
                                    <Item
                                        disabled={
                                            currentPerms.indexOf("system:graphicConfig:edit") === -1
                                        }
                                        onClick={() => {
                                            this.setState({
                                                category: {
                                                    ...category,
                                                    showModal: true,
                                                    form: {
                                                        ...category.form,
                                                        id: category.form.id,
                                                    },
                                                },
                                            });
                                        }}
                                    >
                                        Update Folder
                                    </Item>
                                    <Item
                                        disabled={
                                            currentPerms.indexOf("system:graphicConfig:delete") ===
                                            -1 || isDeleteDisabled
                                        }
                                        onClick={this.deleteCategory}
                                    >
                                        Delete Folder
                                    </Item>
                                </Menu>
                            </Card.Content>
                        </Card>
                    </Grid.Column>
                    <Grid.Column width={10} style={{height: "100%"}}>
                        <Card style={{height: "100%"}}>
                            <Card.Header title="Graphics"></Card.Header>
                            <Card.Content>
                                <DataTable
                                    data={rightData}
                                    selectionMode="single"
                                    selection={selectedGraphic}
                                    onSelectionChange={(e) =>
                                        this.setState({selectedGraphic: e})
                                    }
                                >
                                    <DataTable.HeaderBar>
                                        {currentPerms.indexOf("system:graphicConfig:add") !== -1 ? (
                                            <DataTable.HeaderBar.Item
                                                icon="slidercontrols-plus"
                                                content={
                                                    <Popup
                                                        element={
                                                            <span style={{fontSize: "1rem"}}>
                                New Graphic
                              </span>
                                                        }
                                                        on="click"
                                                    >
                                                        <VerticalMenu>
                                                            <VerticalMenu.Item
                                                                onClick={this.addBooleanGraphic}
                                                            >
                                                                Boolean Image
                                                            </VerticalMenu.Item>
                                                            <VerticalMenu.Item
                                                                onClick={this.addNumericGraphic}
                                                            >
                                                                Numeric Image
                                                            </VerticalMenu.Item>
                                                            <VerticalMenu.Item onClick={this.addPureGraphic}>
                                                                Pure Image
                                                            </VerticalMenu.Item>
                                                        </VerticalMenu>
                                                    </Popup>
                                                }
                                            />
                                        ) : null}
                                    </DataTable.HeaderBar>
                                    <DataTable.ActionBar clearSelectionOnClose={true}>
                                        <DataTable.ActionBar.Item
                                            icon="document-blank"
                                            iconSize="small"
                                            content="View"
                                            onClick={this.viewGraphic}
                                        />
                                        {currentPerms.indexOf("system:graphicConfig:edit") !==
                                        -1 ? (
                                            <DataTable.ActionBar.Item
                                                icon="edit"
                                                iconSize="small"
                                                content="Edit"
                                                onClick={this.editGraphic}
                                            />
                                        ) : null}
                                        {currentPerms.indexOf("system:graphicConfig:delete") !==
                                        -1 ? (
                                            <DataTable.ActionBar.Item
                                                icon="delete"
                                                iconSize="small"
                                                content="Delete"
                                                onClick={this.deleteGraphic}
                                            />
                                        ) : null}
                                    </DataTable.ActionBar>
                                    <DataTable.Column field="name" header="Name"/>
                                    <DataTable.Column field="type" header="Type"/>
                                    <DataTable.Column field="width" header="Width"/>
                                    <DataTable.Column field="height" header="Height"/>
                                </DataTable>
                            </Card.Content>
                        </Card>
                    </Grid.Column>
                </Grid.Row>

                <Modal
                    show={category.showModal}
                    backdrop="static"
                    onHide={() => {
                        this.setState({
                            category: {
                                ...category,
                                showModal: false,
                            },
                        });
                    }}
                >
                    <Modal.Header>
                        <Modal.Title>Folder</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        <Form
                            fluid
                            ref={(ref) => (this.folderform = ref)}
                            onChange={(form) => {
                                this.setState({
                                    category: {
                                        ...category,
                                        form: form,
                                    },
                                });
                            }}
                            formValue={category.form}
                        >
                            <CustomField name="name" label="Folder Name" accepter={Input}/>
                        </Form>
                    </Modal.Body>
                    <Modal.Footer>
                        <Button appearance="primary" onClick={this.addCategorySubmit}>
                            Submit
                        </Button>
                        <Button
                            appearance="primary"
                            onClick={() => {
                                this.setState({
                                    category: {
                                        ...category,
                                        showModal: false,
                                    },
                                });
                            }}
                        >
                            Cancel
                        </Button>
                    </Modal.Footer>
                </Modal>

                <Modal
                    show={booleanGraphic.showModal}
                    onHide={() => {
                        this.setState({
                            booleanGraphic: {...booleanGraphic, showModal: false},
                        });
                    }}
                    backdrop="static"
                    size="lg"
                >
                    <Form
                        fluid
                        onChange={(form) => {
                            this.setState({
                                booleanGraphic: {
                                    ...booleanGraphic,
                                    form: form,
                                },
                            });
                        }}
                        formValue={booleanGraphic.form}
                    >
                        <Modal.Header>
                            <Modal.Title>Boolean Graphic Component</Modal.Title>
                        </Modal.Header>
                        <Modal.Body>
                            <CustomField name="name" label="Name:" accepter={Input}/>
                            <CustomField name="width" label="Width:" accepter={InputNumber}/>
                            <CustomField
                                name="height"
                                label="Height:"
                                accepter={InputNumber}
                            />
                            <FormGroup>
                                <ControlLabel>Component Detail:</ControlLabel>
                                <Table data={booleanGraphic.tableData}>
                                    <Table.Column field="imageValue" header="ImageValue"/>
                                    <Table.Column field="fileName" header="ImageName"/>
                                    <Table.Column
                                        field="upload"
                                        header="Upload"
                                        renderer={(cell) => {
                                            return (
                                                <Uploader
                                                    action={`${rest.host}${rest.graphic.file}`}
                                                    fileListVisible={false}
                                                    onSuccess={(response, fileInfo) =>
                                                        this.booleanGraphicSuccess(response, fileInfo, cell)
                                                    }
                                                >
                                                    <button>
                                                        <Icon name="file-upload"/>
                                                    </button>
                                                </Uploader>
                                            );
                                        }}
                                    />
                                    <Table.Column
                                        field="isDefault"
                                        header="Default Display"
                                        renderer={(cell) => {
                                            return (
                                                <Toggle
                                                    checked={cell.rowData.isDefault}
                                                    onChange={(checked) => {
                                                        this.booleanDefaultChange(checked, cell.rowIndex);
                                                    }}
                                                />
                                            );
                                        }}
                                    />
                                </Table>
                            </FormGroup>
                        </Modal.Body>
                        <Modal.Footer>
                            <FormGroup>
                                <Button
                                    appearance="primary"
                                    onClick={this.booleanGraphicSubmit}
                                >
                                    Submit
                                </Button>
                                <Button
                                    appearance="primary"
                                    onClick={() => {
                                        this.setState({
                                            booleanGraphic: {...booleanGraphic, showModal: false},
                                        });
                                    }}
                                >
                                    Cancel
                                </Button>
                            </FormGroup>
                        </Modal.Footer>
                    </Form>
                </Modal>

                <Modal
                    show={numericGraphic.showModal}
                    onHide={() => {
                        this.setState({
                            numericGraphic: {...numericGraphic, showModal: false},
                        });
                    }}
                    backdrop="static"
                    size="lg"
                >
                    <Form
                        fluid
                        onChange={(form) => {
                            this.setState({
                                numericGraphic: {
                                    ...numericGraphic,
                                    form: form,
                                },
                            });
                        }}
                        formValue={numericGraphic.form}
                    >
                        <Modal.Header>
                            <Modal.Title>Numeric Graphic Component</Modal.Title>
                        </Modal.Header>
                        <Modal.Body>
                            <CustomField name="name" label="Name:" accepter={Input}/>
                            <CustomField name="width" label="Width:" accepter={InputNumber}/>
                            <CustomField
                                name="height"
                                label="Height:"
                                accepter={InputNumber}
                            />
                            <FormGroup>
                                <ControlLabel>Component Detail</ControlLabel>
                                <Table
                                    data={numericGraphic.tableData}
                                    onEdit={(newData, cellData) =>
                                        this.editNumericImageData(newData, cellData)
                                    }
                                >
                                    <Table.Column
                                        field="minValue"
                                        header="Min Value"
                                        editable={true}
                                    />
                                    <Table.Column
                                        field="maxValue"
                                        header="Max Value"
                                        editable={true}
                                    />
                                    <Table.Column field="fileName" header="Image Name"/>
                                    <Table.Column
                                        field="upload"
                                        header="Upload"
                                        renderer={(cell) => {
                                            return (
                                                <Uploader
                                                    action={`${rest.host}${rest.graphic.file}`}
                                                    fileListVisible={false}
                                                    onSuccess={(response, fileInfo) =>
                                                        this.numericGraphicSuccess(response, fileInfo, cell)
                                                    }
                                                    shouldUpload={() => this.numericGraphicBefore(cell)}
                                                >
                                                    <button>
                                                        <Icon name="file-upload"/>
                                                    </button>
                                                </Uploader>
                                            );
                                        }}
                                    />
                                    <Table.Column
                                        field="isDefault"
                                        header="Default Display"
                                        renderer={(cell) => {
                                            return (
                                                <Toggle
                                                    checked={cell.rowData.isDefault}
                                                    onChange={(checked) => {
                                                        this.numericDefaultChange(checked, cell.rowIndex);
                                                    }}
                                                />
                                            );
                                        }}
                                    />
                                </Table>
                            </FormGroup>
                            <FormGroup style={{float: "right"}}>
                                <Button
                                    type="inline-secondary"
                                    size="small"
                                    content=""
                                    icon="badge-plus"
                                    onClick={this.addNumericTableData}
                                />
                                <Button
                                    type="inline-secondary"
                                    size="small"
                                    content=""
                                    icon="badge-delete"
                                    onClick={this.removeNumericTableData}
                                />
                            </FormGroup>
                        </Modal.Body>
                        <Modal.Footer>
                            <FormGroup>
                                <Button
                                    appearance="primary"
                                    onClick={this.numericGraphicSubmit}
                                >
                                    Submit
                                </Button>
                                <Button
                                    appearance="primary"
                                    onClick={() => {
                                        this.setState({
                                            numericGraphic: {...numericGraphic, showModal: false},
                                        });
                                    }}
                                >
                                    Cancel
                                </Button>
                            </FormGroup>
                        </Modal.Footer>
                    </Form>
                </Modal>
                <Modal
                    show={pureGraphic.showModal}
                    onHide={() => {
                        this.setState({
                            pureGraphic: {...pureGraphic, showModal: false},
                        });
                    }}
                    backdrop="static"
                    size="lg"
                >
                    <Form
                        fluid
                        onChange={(form) => {
                            this.setState({
                                pureGraphic: {
                                    ...pureGraphic,
                                    form: form,
                                },
                            });
                        }}
                        formValue={pureGraphic.form}
                    >
                        <Modal.Header>
                            <Modal.Title>Pure Graphic Component</Modal.Title>
                        </Modal.Header>
                        <Modal.Body>
                            <CustomField name="name" label="Name:" accepter={Input}/>
                            <CustomField name="width" label="Width:" accepter={InputNumber}/>
                            <CustomField
                                name="height"
                                label="Height:"
                                accepter={InputNumber}
                            />
                            <FormGroup>
                                <ControlLabel>Component Detail</ControlLabel>
                                <Table data={pureGraphic.tableData}>
                                    <Table.Column field="fileName" header="Image Name"/>
                                    <Table.Column
                                        field="upload"
                                        header="Upload"
                                        renderer={(cell) => {
                                            return (
                                                <Uploader
                                                    action={`${rest.host}${rest.graphic.file}`}
                                                    fileListVisible={false}
                                                    onSuccess={(response, fileInfo) =>
                                                        this.pureGraphicSuccess(response, fileInfo, cell)
                                                    }
                                                >
                                                    <button>
                                                        <Icon name="file-upload"/>
                                                    </button>
                                                </Uploader>
                                            );
                                        }}
                                    />
                                </Table>
                            </FormGroup>
                        </Modal.Body>
                        <Modal.Footer>
                            <FormGroup>
                                <Button appearance="primary" onClick={this.pureGraphicSubmit}>
                                    Submit
                                </Button>
                                <Button
                                    appearance="primary"
                                    onClick={() => {
                                        this.setState({
                                            pureGraphic: {...pureGraphic, showModal: false},
                                        });
                                    }}
                                >
                                    Cancel
                                </Button>
                            </FormGroup>
                        </Modal.Footer>
                    </Form>
                </Modal>
                <Modal
                    show={viewGraphic.showModal}
                    onHide={() => {
                        this.setState({
                            viewGraphic: {...viewGraphic, showModal: false},
                        });
                    }}
                    backdrop="static"
                    size="lg"
                >
                    <Modal.Header>
                        <Modal.Title>View Graphic</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        <Table data={viewGraphic.data}>
                            <Table.Column initialWidth={4} field="logic" header="Logic"/>
                            <Table.Column initialWidth={8} field="path" header="Image"/>
                        </Table>
                    </Modal.Body>
                </Modal>
            </Grid>
        );
    }
}

export default (props) => (
    <GraphicConfig {...props} key={props.location.pathname}/>
);
